<template>
  <div class="article-container">
    <el-card class="box-card">
      <!-- 标题 -->
      <div
        slot="header"
        class="clearfix"
      >
        <el-breadcrumb>
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 主体表格 -->
      <el-table
        style="width: 100%"
        :data="tableData
      "
      >
        <el-table-column
          prop="title"
          label="文章标题"
        > </el-table-column>
        <el-table-column
          prop="title"
          label="总评论数"
        > </el-table-column>
        <el-table-column
          prop="title"
          label="粉丝评论数"
        > </el-table-column>

        <!-- 由于后端回传的数据是数值，而我们要显示出来是对应字符串，
        所以，这里不能直接使用status -->
        <el-table-column label="评论状态">
          <template>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template>
            <el-button
              size="mini"
              type="primary"
              circle
            >关闭评论</el-button>
            <el-button
              size="mini"
              type="danger"
              circle
            >打开评论</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件
        它只是根据total和page-size来显示页码，而与具体的表格数据无关

        1. total是总条数数；
        默认情况，它会以每页10条进行计算总页数
        2. current-change。当点击页码时，它会触发,会传入当前的页码。
      -->
      <el-pagination
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { putCommentsAPI } from '@/api'
export default {
  name: 'Comment',
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    async getCommentFn () {
      const res = await putCommentsAPI()
      console.log(res)
    }

  },
  created () {

  }
}
</script>

<style scoped lang='less'></style>
